<link href="<?php echo base_url('assets/css/ext-all.css'); ?>" rel="stylesheet">
<script src="<?php echo base_url('assets/js/yui-utilities.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/ext-yui-adapter.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/ext-all.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/TreeCheckNode.js'); ?>"></script>
<link href="<?php echo base_url('assets/css/TreeCheckNode.css'); ?>" rel="stylesheet">
<script type="text/javascript">
    Ext.BLANK_IMAGE_URL = '/assets/images/default/tree/s.gif';
    Ext.EventManager.onDocumentReady(function () {
        tree = new Ext.tree.TreePanel('tree-div', {
            animate: true,
            loader: new Ext.tree.CustomUITreeLoader({
                dataUrl: '<?php echo base_url('assets/json/treeView.json');?>',
                baseAttr: {
                    uiProvider: Ext.tree.CheckboxNodeUI
                }
            }),
            enableDD: false,
            containerScroll: true,
            rootUIProvider: Ext.tree.CheckboxNodeUI,
            selModel: new Ext.tree.CheckNodeMultiSelectionModel(),
            rootVisible: false
        });

        tree.on('check', function () {
            Ext.get('checkedNodes').dom.value = tree.getChecked().join(',');
        }, tree);

        // set the root node
        root = new Ext.tree.AsyncTreeNode({
            text: 'root',
            draggable: false,
            id: 'source',
            uiProvider: Ext.tree.CheckboxNodeUI
        });
        tree.setRootNode(root);

        // render the tree
        tree.render();
        root.expand(false, false, function () {
            root.firstChild.expand(false);
//                Ext.get('cn').dom.value = tree.getChecked().join(',');
            ser();
        });
        tree.expandAll();
        tree.collapseAll();
//            Ext.get('exp').on('click', function() {
//                tree.expandAll();
//            });
//
//            Ext.get('coll').on('click', function() {
//                tree.collapseAll();
//            });
//
//            Ext.get('ser').on('click', ser);
//            Ext.get('cn').dom.value = Ext.get('originCheckedIds').dom.value;
    });

    ser = function () {
        var c = Ext.get('c');
//            c.dom.style.display='block';
//            c.dom.firstChild.innerHTML = tree.getChecked();
    };
</script>

<div style="margin-top: 100px;"></div>
<?php echo form_open('admin/authorizations/update', 'class="main_cont"') ?>
<div style="margin-left: 200px;margin-bottom: 20px; height: 25px;">
    <input type="button" class="btn_admin" id="exp" value="Expand All"/>
    <input type="button" id="coll" class="btn_admin	" value="Collapse All"/>
</div>
<div id="tree-div" style="margin-left: 200px;"></div>
<input type="hidden" name = "checkedNodes" id="checkedNodes" value="<?php echo isset($checkedIds) ? $checkedIds : ''; ?>" autocomplete="off" />
<!--    <input type="hidden" name = "role" value="--><?php //echo  $role?><!--"/>-->
<?php echo form_close(); ?>